<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <ScaleScreen
      :width="1920"
      :height="1080"
      class="down-scale-wrap"
      :selfAdaption="$store.state.setting.isScale">
    <div class="down-bg">
      <div class="down-host-body">
        <!-- 头部 s -->
        <div class="down-d-flex down-jc-center down-title_wrap">
          <div class="down-zuojuxing"></div>
          <div class="down-youjuxing"></div>
          <div class="down-guang"></div>
          <div class="down-d-flex down-jc-center">
            <div class="down-title">
              <span class="down-title-text"> “天-地-孔”一体化监测平台</span>
            </div>
          </div>
        </div>
        <!-- 头部 e-->
        <!-- 内容  s-->
<!--        <router-view></router-view>-->
<!--        <div>-->
<!--          <LeftTop></LeftTop>&lt;!&ndash; 替换为具体的组件页面 &ndash;&gt;-->
<!--          <LeftCenter></LeftCenter>-->
<!--          <LeftBottom></LeftBottom>-->
<!--          <CenterMap></CenterMap>-->
<!--          <CenterBottom></CenterBottom>-->
<!--        </div>-->
        <!-- 内容 e -->
        <div class="down-contents">

<!--          <div class="down-contetn_left">-->
<!--            <div class="down-pagetab">-->
<!--            </div>-->
<!--            <ItemWrap class="down-contetn_left-top down-contetn_lr-item" title="工作面列表">-->
<!--              <LeftTop/>-->
<!--            </ItemWrap>-->
<!--          </div>-->

          <div class="down-contetn_left">
<!--            <div class="down-pagetab">-->
<!--            </div>-->
            <ItemWrap class="down-contetn_left-top down-contetn_lr-item" title="无人机作业列表">
              <LeftTop @selectVideo="updateVideo"/>
            </ItemWrap>
          </div>

          <div class="down-contetn_center">
<!--            <CenterMap class="down-contetn_center_top" />-->
            <ItemWrap class="down-contetn_center-bottom" title="信息详情">
              <CenterBottom :videoUrl="videoUrl"/>
            </ItemWrap>
          </div>
<!--          <div class="down-contetn_right">-->
<!--            <ItemWrap-->
<!--                class="down-contetn_left-bottom down-contetn_lr-item"-->
<!--                title="近期水位变化"-->
<!--            >-->
<!--              <RightTop />-->
<!--            </ItemWrap>-->
<!--            <ItemWrap-->
<!--                class="down-contetn_left-bottom down-contetn_lr-item"-->
<!--                title="报警预警"-->
<!--                style="padding: 0 10px 16px 10px"-->
<!--            >-->
<!--              <RightCenter />-->
<!--            </ItemWrap>-->
            <!--      <ItemWrap-->
            <!--        class="contetn_left-bottom contetn_lr-item"-->
            <!--        title="数据统计图 "-->
            <!--      >-->
            <!--        <RightBottom />-->
            <!--      </ItemWrap>-->
<!--          </div>-->
        </div>
      </div>
    </div>
<!--    <Setting ref="setting" />-->
  </ScaleScreen>

<!--  <div class="down-contents">-->
<!--    <div class="down-contetn_left">-->
<!--&lt;!&ndash;      <div class="down-pagetab">&ndash;&gt;-->
<!--&lt;!&ndash;        &lt;!&ndash; <div class="item">实时监测</div> &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--      <ItemWrap class="down-contetn_left-top down-contetn_lr-item" title="设备总览">-->
<!--        <LeftTop/>-->
<!--      </ItemWrap>-->
<!--      -->
<!--    </div>-->

<!--    <div class="down-contetn_center">-->
<!--      <ItemWrap class="down-contetn_center-bottom" title="图片展示">-->
<!--&lt;!&ndash;        <CenterBottom />&ndash;&gt;-->
<!--        <LeftTop/>-->
<!--      </ItemWrap>-->
<!--    </div>-->

<!--    <div class="contetn_right">-->
<!--      <ItemWrap-->
<!--        class="contetn_left-bottom contetn_lr-item" title="报警次数">-->
<!--        <RightTop />-->
<!--      </ItemWrap>-->
<!--      <ItemWrap-->
<!--        class="contetn_left-bottom contetn_lr-item" title="报警排名(TOP8)" style="padding: 0 10px 16px 10px">-->
<!--        <RightCenter />-->
<!--      </ItemWrap>-->
<!--      <ItemWrap-->
<!--        class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">-->
<!--        <RightBottom />-->
<!--      </ItemWrap>-->
<!--    </div>-->

</template>

<script>
import Setting from "@/views/setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import LeftTop from './menu-list2.vue'
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./VideoList.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";

export default {
  components: {
    Setting,
    ScaleScreen,
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
  },
  data() {
    return {
        videoUrl: '' // 初始化为空，等待事件更新
      };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {},
  methods: {
    updateVideo(video) {
      this.videoUrl = video; // 更新 imageUrl，这会传递到 CenterBottom 组件
    }
    // handleButtonClick2() {
    //   // 处理按钮2的点击事件
    // },
    // 添加更多按钮点击事件处理方法
  }
};
</script>
<style lang="scss" scoped>
@import "./down-home.scss";
// 内容
.down-contents {
  display: flex;
  height: 100%;
  width: 95%;
  .down-contetn_left{
    flex: 2;
  }
  .down-contetn_center {
    flex: 7;
  }

  //左右两侧 三个块
  //.contetn_lr-item {
  //  height: 310px;
  //}

  //.contetn_center_top {
  //  width: 100%;
  //}

  // 中间
  //.contetn_center {
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-around;
  //}

  //.contetn_center-bottom {
  //  height: 1500px;
  //}

  ////左边 右边 结构一样
  //.contetn_left,
  //.contetn_right {
  //  display: flex;
  //  flex-direction: column;
  //  justify-content: space-around;
  //  position: relative;
  //
  //
  //}
}
.button-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button {
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
